<template>
  <view>
    <view class="header">
      <i class="ri-arrow-left-s-line"></i>
      <view class="u-flex u-flex-between">
        <div class="u-flex">
          <up-avatar></up-avatar>
          <div>
            <h3>Rose</h3>
            <div class="u-flex">
              <i class="ri-map-pin-2-fill"></i>
              <p>古弄村</p>
            </div>
          </div>
        </div>

        <view class="u-flex">
          <up-button
            type="warning"
            size="mini"
            plain
            shape="circle"
            text="关注"
          ></up-button>
          <div><i class="ri-share-box-fill"></i></div>
        </view>
      </view>
    </view>

    <u-swiper
      :list="swiperList"
      :height="470"
      indicator
      indicatorMode="dot"
      @change="swiperChange"
      @click="swiperClick"
    ></u-swiper>

    <view class="content">
        <h4 class="content-title">
            title
        </h4>
        <p class="content-richText">
            <u-parse :content="contentRich"></u-parse>
        </p>
    </view>
    
    <view class="tag-list">
        <view v-for="(item, i) in tagList" :key="item.id">
            {{ item.name }}
        </view>
    </view>

    <p>
        编辑于 2023-10-14
    </p>

    <view class="comment">
        <p>共209条评论</p>
        <view class="comment-inputWrap">
            <up-avatar class="u-m-10" size="30"></up-avatar>
            <view class="" style="flex: 1">
                  <up-input
                    placeholder="留下你的想法吧"
                    border="surround"
                    v-model="commentValue"
                    shape="circle"
                    :customStyle="{ width: '92%' }"
                ></up-input>
                <view class="comment-iconWrap">
                    <i class="ri-at-line"></i>
                    <i class="ri-emotion-line"></i>
                    <i class="ri-image-2-line"></i>
                </view>
            </view>
        </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onBeforeMount,
  reactive,
  toRefs,
  computed,
  nextTick,
} from "vue";

const commentValue = ref('')
const swiperList = ref([
  "https://cdn.uviewui.com/uview/swiper/swiper1.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png",
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
]);

const contentRich = ref(
    `
      <p>川西真的太浪漫了！
        如果你来川西，一定不要错过这个小众雪山天堂。
        🏔️不仅可以超近距离看雪山，又不用去到高海拔地区，还有小溪草地，
        牦牛骏马就在身边嬉戏，真的非常浪漫！</p>
    <p>
     🌿来这里很方便，旁边就是塔公草原，离新都桥也就不到1小时车程。沿途的风景非常美，
        会路过很多免费的草原，喜欢拍照的也可以下车拍照。</p>
    <p>
        🏕️这里是一个能最近距离看雪山的村庄，
        山间有草原和溪流，可以顺着河道找个自己喜欢的地方露营，享受纯天然的雪山脚下的露营生活。</p>
       <p>📍地点：姑弄村</p>
       <p>🏔️地址：四川省甘孜州康定市姑弄村</p>
       <p>🎫门票：免费</p>
       <p>⏰开放时间：全天</p>
       <p>🚘自驾：导航姑弄村，停车免费</p>
        `
)

const tagList = ref([
    {
        id: 1,
        name: "雪山",
    },
      {
        id: 1,
        name: "甘孜旅游",
    },
    {
        id: 1,
        name: "川西",
    },
])

const commentList = ref([
    {
      id: 1,
      text: '第一条评论',
      author: '张三',
      date: '2022-10-20',
      location: '北京',
      likes: 10,
      replies: [
        {
          id: 2,
          text: '回复第一条评论',
          author: '李四',
          date: '2022-10-21',
          location: '上海',
          likes: 5,
          replies: [
            {
              id: 4,
              text: '回复回复',
              author: '王五',
              date: '2022-10-22',
              location: '广州',
              likes: 2,
              replies: []
            }
          ]
        },
        {
          id: 3,
          text: '另一个回复第一条评论',
          author: '赵六',
          date: '2022-10-23',
          location: '深圳',
          likes: 3,
          replies: []
        }
      ]
    },
    {
      id: 5,
      text: '第二条评论',
      author: '钱七',
      date: '2022-10-24',
      location: '成都',
      likes: 8,
      replies: []
    }
  ])

const swiperChange = (e) => {};

const swiperClick = (e) => {};
</script>

<style lang="scss">
    .comment {
        &-inputWrap{
            position: relative;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            justify-content: space-between;
            width: 100%;
        }
        &-iconWrap{
            position: absolute;
            right: 20px;
            top: 20px
        }
    }
</style>